﻿<!DOCTYPE html>
<html>
<head>
    <title>A escassez de água no Sudeste</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" href="comum/css/themes/default/jquery.mobile-1.3.1.css" type="text/css" />

    <!--<link rel="stylesheet" href="comum/capa/css/capa.css">-->
    <link rel="stylesheet" href="comum/css/global.css">
    <link rel="stylesheet" href="css/comum.css">
    <link rel="stylesheet" href="fonts/fontes.css">
    <link rel="stylesheet" href="css/grid_padrao.css">
    <link rel="stylesheet" href="css/abertura.css">
    <link rel="stylesheet" href="css/menu.css">
    <!--<link rel="stylesheet" href="css/pagina01.css">
    <link rel="stylesheet" href="css/pagina02.css">
    <link rel="stylesheet" href="css/pagina03.css">
    <link rel="stylesheet" href="css/pagina04.css">
    <link rel="stylesheet" href="css/pagina05.css">-->
    <link rel="stylesheet" href="img/ui/sprites.css">
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/style.css?v=1.8">
    <link rel="stylesheet" href="css/swiper-demos.css?v=1.8">


    <script src="comum/js/jquery-1.9.1.js"></script>
    <script src="comum/js/jquery.mobile-1.3.1.js"></script>
    <script src="comum/js/plugins/CSSPlugin.min.js"></script>
    <script src="comum/js/easing/EasePack.min.js"></script>
    <script src="comum/js/TweenLite.min.js"></script>
    <script src="comum/js/jquery.gsap.min.js"></script>
    <script src="comum/js/jquery-ui.js"></script>
    <script src="comum/js/jquery.ui.touch-punch.js"></script>

    <!-- Swiper -->
    <script src="js/idangerous.swiper-1.9.1.min.js"></script>
    <!-- Swiper Scrollbar plugin -->
    <script src="js/idangerous.swiper.scrollbar-1.2.js"></script>
    <!-- Demos code -->
    <script src="js/swiper-demos.js"></script>


    <script src="js/define_grid.js"></script>
    <!-- TEXTOS-->
    <script src="config.js"></script>

    <!-- ADICIONAR OS SCRIPTS DA PEÇA NO FINAL DO BODY, abaixo do comum -->
</head>

<body>
    <!-- DIV para separar os audios e conseguir compactar -->
    <div>
        <!--<audio preload="none" id="audVideo">
            <source src="audio/Bt_video.mp3" type="audio/mpeg">
            <source src="audio/Bt_video.ogg" type="audio/ogg">
            <source src="audio/Bt_video.m4a" type="audio/mp4">
            Your browser does not support the audio element.
        </audio>

        <audio preload="none" id="audInicio">
            <source src="audio/Inicio1.mp3" type="audio/mpeg">
            <source src="audio/Inicio1.ogg" type="audio/ogg">
            <source src="audio/Inicio1.m4a" type="audio/mp4">
            Your browser does not support the audio element.
        </audio>

        <audio preload="none" id="audEsquerda">
            <source src="audio/SetaJornalEsquerda.mp3" type="audio/mpeg">
            <source src="audio/SetaJornalEsquerda.ogg" type="audio/ogg">
            <source src="audio/SetaJornalEsquerda.m4a" type="audio/mp4">
            Your browser does not support the audio element.
        </audio>

        <audio preload="none" id="audDireita">
            <source src="audio/SetasJornalDireita.mp3" type="audio/mpeg">
            <source src="audio/SetasJornalDireita.ogg" type="audio/ogg">
            <source src="audio/SetasJornalDireita.m4a" type="audio/mp4">
            Your browser does not support the audio element.
        </audio>-->

        <video id="video1pagina6" controls>
            <source src="video/video_demo.mp4" type="video/mp4">
            <!--<source src="video/video1pagina6.ogv" type="video/ogg">-->
            <br>
            <br>
            <br>
            Your browser does not support the video tag.
        </video>


    </div>
    <div class="base ImagemFundo">
        <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
        <!-- Abertura -->
        <div data-role="page" id="pagina0" class="pages">
            <div data-role="content">
                <div id="ImagemFundoCapa"></div>
                <div id="ico_ImagemPg0"></div>
                <a href="#pagina1" style="z-index: 3;">
                    <div id="ico_btIniciar" style="z-index: 3;"></div>
                </a>
            </div>
        </div>

        <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
        <!-- pagina1 -->
        <!--<div class="pages">-->
        <div data-role="page" id="pagina1" class="pages">
            <div id="BgPg1"/></div>
            <div id="ico_ImagemPg1"/></div>
            <div id="ico_tip_oed"/></div>
            <div id="TituloPg1" class="titulos TituloPg">Sem Título</div>
            <div id="Texto01Pg1" class="textos Texto01Pg">Sem Texto1</div>
            <div id="Texto02Pg1" class="textos Texto02Pg">Sem Texto2</div>
            <div id="Legendapg1" class="legendas LegendaPg">Sem Legenda</div>
        </div>

        <!-- pagina2 -->
        <div data-role="page" id="pagina2" class="pages">
            <div id="BgPg2"/></div>
            <div id="ico_ImagemPg2"/></div>
            <div id="ico_tip_oed"/></div>
            <div id="TituloPg2" class="titulos TituloPg">Sem Título</div>
            <div id="Texto01Pg2" class="textos Texto01Pg">Sem Texto1</div>
            <div id="Texto02Pg2" class="textos Texto02Pg">Sem Texto2</div>
            <div id="Legendapg2" class="legendas LegendaPg">Sem Legenda</div>

        </div>

        <!-- pagina3 -->
        <div data-role="page" id="pagina3" class="pages">
            <div id="BgPg3"/></div>
            <div id="ico_ImagemPg3" class="ImagemPagina"/></div>
            <div id="ico_tip_oed"/></div>
            <div id="TituloPg3" class="titulos TituloPg">Sem Título</div>
            <div id="Texto01Pg3" class="textos Texto01Pg">Sem Texto1</div>
            <div id="Texto02Pg3" class="textos Texto02Pg">Sem Texto2</div>
            <div id="Legendapg3" class="legendas LegendaPg">Sem Legenda</div>
        </div>

        <!-- pagina4 -->
        <div data-role="page" id="pagina4" class="pages">
            <div id="BgPg4"/></div>
            <div id="ico_ImagemPg4" class="ImagemPagina"/></div>
            <div id="ico_tip_oed"/></div>
            <div id="TituloPg4" class="titulos TituloPg">Sem Título</div>
            <div id="Texto01Pg4" class="textos Texto01Pg">Sem Texto1</div>
            <div id="Texto02Pg4" class="textos Texto02Pg">Sem Texto2</div>
            <div id="Legendapg4" class="legendas LegendaPg">Sem Legenda</div>
        </div>
        <!-- pagina5 -->
        <div data-role="page" id="pagina5" class="pages">
             <div id="BgPg5"/></div>
            <div id="ico_ImagemPg5" class="ImagemPagina"/></div>
            <div id="ico_tip_oed"/></div>
            <div id="TituloPg5" class="titulos TituloPg">Sem Título</div>
            <div id="Texto01Pg5" class="textos Texto01Pg">Sem Texto1</div>
            <div id="Texto02Pg5" class="textos Texto02Pg">Sem Texto2</div>
            <div id="Legendapg5" class="legendas LegendaPg">Sem Legenda</div>
        </div>        
         <!-- pagina6 -->       
        <div data-role="page" id="pagina6" class="pages">
            <div id="BgPg6"/></div>            
            <div id="ico_ImagemPg6" class="ImagemPagina"/></div>
            <div id="ico_tip_oed"/></div>
            <div id="TituloPg6" class="titulos TituloPg">Sem Título</div>
            <div id="Texto01Pg6" class="textos Texto01Pg">Sem Texto1></div>
            <div id="Texto02Pg6" class="textos Texto02Pg">Sem Texto2</div>
            <div id="Legendapg6" class="legendas LegendaPg">Sem Legenda</div>
         <!-- pagina6 --> 
        </div>

        <div data-role="page" id="pagina7">
            <div id="BgPg7"/></div>            
            <div id="ico_ImagemPg7" class="ImagemPagina"/></div>
            <div id="ico_tip_oed"/></div>
            <div id="TituloPg7" class="titulos TituloPg">Página Final</div>
            <div id="Texto01Pg7" class="textos Texto01Pg">Sem Texto1></div>
            <div id="Texto02Pg7" class="textos Texto02Pg">Sem Texto2</div>
            <div id="Legendapg7" class="legendas LegendaPg">Sem Legenda</div>

        </div>
    </div>

        <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
        <div id="ico_bg_baixo_abertura"/></div>
        <div id="ico_bg_baixo"/></div>

        
        <!-- menu -->
        
        <!-- <div class="menu">
            <a href="#">
                    <div id="ico_pg1"></div>
            </a>
            <a href="#">
                    <div id="ico_pg2"></div>
            </a>
            <a href="#">
                    <div id="ico_pg3"></div>
            </a>
            <a href="#">
                    <div id="ico_pg4"></div>
            </a>
            <a href="#">
                    <div id="ico_pg5"></div>
            </a>
            <a href="#">
                    <div id="ico_pg6"></div>
            </a>
            <a href="#">
                    <div id="ico_pg7"></div>
            </a>
        </div> -->

        <div class="SetasPaginacao">
            <a href="#">
                    <div id="ico_setinhas_esquerda"></div>
            </a>
            <a href="#">
                    <div id="ico_setinhas_direita"></div>
            </a>
        </div>  

        <div Id="FeedbackPositivo" class="Feedbacks"/>
        <div id="BgPgPositivo"/></div>
        <div id="ico_btVoltar1" class="btVoltar" style="z-index: 3;"></div>
        <div id="TituloPgPositivo" class="titulos TituloPg">Tem certeza?</div>
        <div id="Texto01PgPositivo" class="textos Texto01Pg">Você ainda não analisou todas as possibilidade, vamos ver a outra?</div>
        </div>

        <div Id="FeedbackNegativo" class="Feedbacks"/>
        <div id="BgPgNegativo"/></div>
        <div id="ico_btVoltar2" class="btVoltar" style="z-index: 3;"></div>
        <div id="TituloPgNegativo" class="titulos TituloPg">Muito bem!</div>
        <div id="Texto01PgNegativo" class="textos Texto01Pg">Você analisou bem as 2 possibilidades e respondeu adequadamente</div>

        </div>
    </div>
	
	<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - - - - -->

<script type="text/javascript">

DoResize();
window.addEventListener("resize", DoResize, true);
 function DoResize(){
    var ViewP = document.getElementsByTagName('html')[0],
      heigthView = window.innerHeight,
      widthView = window.innerWidth,
      factorView = Math.min(heigthView/768,widthView/1024);
    ViewP.style.webkitTransform ='scale('+factorView+')';
    ViewP.style.transform = 'scale('+factorView+')';
    window.focus();
  }
</script>

    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - - - - -->

	<script type="text/javascript">
        $(".base").css('position', 'relative');
        /*$(document).bind("contextmenu",function(e) {
            e.preventDefault();
        });*/
    </script>
	
    <script src="js/comum.js"></script>
    <script src="js/abertura.js"></script>
    <script src="js/pagina01.js"></script>
    <script src="js/pagina02.js"></script>
    <script src="js/pagina03.js"></script>
    <script src="js/pagina04.js"></script>
    <script src="js/pagina05.js"></script>
    <script src="js/pagina06.js"></script> 
    <script src="js/pagina07.js"></script>    

</body>
</html>
